<template>
    <div class="bod">
        <h1 class="text_top" v-if="pwdType!=1">
            设置密码后可以用于平台交易
        </h1>
        <h1 class="text_top" style="margin-bottom:15px;" v-else>
           填写下面信息，平台进行核实，审核成功后，您将可 以重新绑定手机号，重置密码
        </h1>
        <ul class="list">
            <li>
                <label>手机号</label><input type="text" readonly placeholder="请输入手机号" v-model="tel">
            </li>
            <li>
                <label>验证码</label><input type="number" placeholder="请输入验证码" v-model="yanzhengma"> <button  class="yanzm" id="btn_yanzm" :class="{'yanzm':canClick,'cant-click':cantClick}" @click="countDown">{{content}}</button>
            </li>
            <li>
                <label v-if="pwdType!=1">设置密码</label><label v-else>设新密码</label><input type="number"  placeholder="请输入要设置的平台交易密码" maxlength="6" v-model="pwd">
            </li>
            <li>
                <label>确认密码</label><input type="number" placeholder="请再次输入要设置的平台交易密码" maxlength="6" v-model=" cepwd">
            </li>
        </ul>
        <p class="tishi" v-if="pwdType!=1">密码可输入6位纯数字<span @click="cellphoneHref">更换手机号</span></p>
         <p class="tishi" v-else><span style="float:left">无法验证手机号</span><span @click="cellphoneHref">更换手机号</span></p>
         <div class="clearfix"></div>
        <div class="button" @click="passWord_sub">
            确认
        </div>
        <div class="show_tel" v-show="show_ceng" v-if="pwdType!=1">
            <div class="show_tel_stext">
                <p>您已绑定手机号，可通过短信验证码重置平台交易密码。即将发送验证码到{{phone}}</p>
                <div class="btn_cancel">
                    <button class="bored_right" @click="cancel(1)">取消</button>
                    <button  @click="cancel(2)">确定</button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            content:'获取验证码',//验证码
            canClick:true,//
            cantClick:false,
            totalTime:'60',
            yanzengma:'',
            tel:'',
            pwd:'',
            cepwd:'',
            yanzhengma:'',
            phone:'',//获取手机号
            show_ceng:false,
            pwdType:this.$route.query.pwdType,
        }
    },
    created(){
        //检测是否设置过交易密码
        this.chkifhaspwd()
    },
    mounted(){
        this.loadaccoutinfo()
    },
    methods:{
        countDown() {     //发送定时器
            if(this.tel){
                if (!this.canClick) return;
                this.canClick = false;
                this.cantClick = true;
                this.content = "重新发送（" + this.totalTime + "s）";
                this.apii();
                let clock = window.setInterval(() => {
                this.totalTime--;
                this.content = "重新发送（" + this.totalTime + "s）";
                if (this.totalTime < 0) {
                window.clearInterval(clock);
                this.content = "重新发送";
                this.totalTime = 60;
                this.canClick = true;
                }
                }, 1000);
            }else{
                    layer.msg("对不起请填写手机号")
                }
        },
        chkifhaspwd(){
            this.$http.get(this.APIURL_PREFIX+'/api/wap/accounts/sysPwd').then((response) => {
                if(response.data.msg=="该用户以设置交易密码"){
                    console.log('已设置交易密码')
                }else{
                    
                }
            }).catch(function(err){
                console.log(err)
            })
        },
        apii(){//获取验证码
            this.$http.get(this.APIURL_PREFIX+"/api/accounts/checkcode",{ params:{username:this.tel}}).then((response) => {               
            }).catch(function (err) {
                console.log(err)
            });
        },
        passWord_sub:function(){///api/wap/accounts/passWord  设置密码
           if(isNaN(this.pwd)||isNaN(this.cepwd)){
              layer.msg("您的输入格式有误，密码只能是6位纯数字")
               return
           }
           if(this.pwd==""||this.cepwd==""){
              layer.msg("密码不能为空")
               return;
           }
           if(1==this.pwdType){
              if(this.pwd==this.cepwd){
                    this.$http.put(this.APIURL_PREFIX + '/api/wap/accounts/passWord', $.param({passWord:this.cepwd,phone:this.tel,checkcode:this.yanzhengma})).then((response) => {
                       console.log(response.data.msg)
                       if(response.data.msg=="验证码错误！"){
                         layer.msg(response.data.msg)
                        }else if("请输入已绑定手机号！"==response.data.msg){
                         layer.msg(response.data.msg)
                        }else if("修改成功！"==response.data.msg){
                         layer.msg(response.data.msg)
                          this.$router.push({name:'accounts_security'})
                        }
                    }).catch(function (err) {
                        console.log(err)
                    }); 
               }else{
                 layer.msg("对不起2次输入的密码不一致")
             }
           }else{
             if(this.pwd==this.cepwd){
                  this.$http.post(this.APIURL_PREFIX+"/api/wap/accounts/passWord",$.param({passWord:this.cepwd,phone:this.tel,checkcode:this.yanzhengma})).then((response) => {    
                layer.msg(response.data.msg)
                 if(response.data.msg=="验证码错误！"){
                    layer.msg(response.data.msg)
                  }else if("请输入已绑定手机号！"==response.data.msg){
                    layer.msg(response.data.msg)
                  }else if("设置成功"==response.data.msg){
                     layer.msg(response.data.msg)
                     this.$router.push({name:'accounts_security'})
                      
                  }
                  }).catch(function(err){
                    console.log(err)
                 })
             }else{
              layer.msg("对不起2次输入的密码不一致")
             }
           }         
        },
        loadaccoutinfo: function(){//个人资料
            this.$http.get(this.APIURL_PREFIX+'/api/wap/accounts/info').then((response) => {
                this.phone=response.data.data.phone
                console.log(this.phone)
                if(""==this.phone){
                    layer.msg("设置密码")
                }else{
                    this.show_ceng=true;
                    this.tel=this.phone
                }
            }).catch(function(err){
                console.log(err)
            }).then();
            },
        cancel:function(type){
           if(1==type){
               this.show_ceng=false;
           }else{
               this.show_ceng=false;
               this.countDown();
           }
       },
       cellphoneHref:function(){
           this.$router.push({name:'cellphoneHref'})
       }
    }
}
</script>

<style scoped>
.clearfix{
    clear: both;
}
.bored_right{
    border-right: 1px solid #e0e0e0 !important;
}
.btn_cancel{
    margin-top: 25px;
    border-top: 1px solid #e0e0e0;
    margin-bottom: 2px;
}
.btn_cancel button{
    width: 49%;
    border: none;

}
.show_tel_stext p{
    padding: 10px;
}
.show_tel_stext{
    width: 284px;
    height: 139px;
    background: white;
    margin: 0 auto;
    margin-top: 191px;
    border-radius: 15px;
  
}
.show_tel{
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0, 0.5);
    width: 100%;
    height: 100%;
}
.button{
    width: 90%;
    height:45px ;
    background-color: red;
    margin: 110px 5% auto 5%;
    border-radius: 10px;
    line-height: 45px;
    font-weight: 800;
    color: white;
}
.bod{

}
.list{
    text-align: left;
}
.list li{
    border-bottom: 1px solid #e8e8e8;
    background: #ffffff;
}
.list li label{
    font-weight: 500;
    margin-right:15px; 
    margin-left: 15px;
}
.list li input{
    width: 247px;
    border: none;
    background: none;
    font-size: 13px;
}
.list li:nth-of-type(1) input{
    margin-left: 12px;
}
.list li:nth-of-type(2) {
    padding-top: 15px;
}
.list li:nth-of-type(2) input{
    margin-left: 12px;
    width: 133px;
}
.tishi{
    text-align: left;
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 18px;
}
.tishi span{
    float:right;
    color: red;
   text-decoration:underline
}
.text_top{
    width: 100%;
    height: 44px;
    font-size: 15px;
    text-align: left;
    box-sizing: border-box;
    padding: 15px;
}

#btn_yanzm{
 font-size: 14px;
}
.yanzm{
 border: 1px solid red;    
}
.cant-click{
  border: 1px solid blue;
}
.binding_Tel{
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0, 0.5);
  position: fixed;
  top: 0%;
  z-index: 9999;
}
.yanz{
  height: 350px;
  background-color: #f2f2f2;
  margin: 30% auto;
  border-radius: 5px;
  padding: 30px 0;
}
.yanz h1{
  font-size: 15px;
  padding: 15px;
  font-weight: bold;
}
.tel,.tel_yzm{
 border-radius: 5px;
 box-sizing: border-box;
 border: 1px solid #dddddd;
 width: 80%;
 margin: 0 auto;
 text-align: left;
 height: 40px;
 margin: 15px auto;
}
.tel_yzm{
  width:49%;
  float: left;     
}
.tel img,.tel_yzm img{
  margin-left: 1px;
  vertical-align: middle;
  margin-left: 15px;
}
.tel input,.tel_yzm input{
  font-size: 14px;
  background-color: #f2f2f2;
  border: none;
  height:30px;
}
.tel_footer{
  width: 80%;
  margin: 0 auto;
  text-align: left;
  overflow: hidden;
  clear: both;
}
</style>
